<template>
	<view class="content">
		<!-- vr -->
		<view class="vr_area">
			<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">
				<view></view>
				<view class="news-li vr-box" v-for="news in dataList"  :id="news.view_url">
					<view  class="vr_name">{{news.name}}</view>
					<image :src="news.thumb"></image>
					<view class="vr_look"  :id="news.view_url"  @tap="enterShopMall($event)">立即查看</view>
				</view>
				
				
			</mescroll-uni>  
		
		</view>
	</view>
</template>

<script>
	import http from 'common/http.js'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
	
	export default {
		components: {
			uniSwiperDot,
			MescrollUni
		},
		data() {
			return {
					// 下拉刷新的常用配置
					downOption: { 
						use: true, // 是否启用下拉刷新; 默认true
						auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					},
					// 上拉加载的常用配置
					upOption: {
						use: true, // 是否启用上拉加载; 默认true
						auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
						page: {
							num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
							size: 10 // 每页数据的数量,默认10
						},
						noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
						empty: {
							tip: '暂无相关数据'
						}
					},
					// 列表数据
					dataList: [],
					curPageLength:0,
				}
		},
		onLoad() {},
		methods: {
			   enterShopMall(e){
					let webUrl =e.currentTarget.id;
					console.log("index"+webUrl);
					uni.navigateTo({ 
						url:"../baoming/shopMall?weburl="+encodeURIComponent(webUrl)
					}) 
			   	
			   },
               /*下拉刷新的回调 */
               	downCallback(mescroll) {
               		//联网加载数据
               		this.getListDataFromNet(0, 1, (data) => {
               			//联网成功的回调,隐藏下拉刷新的状态
               			mescroll.endSuccess();
               			//设置列表数据
               			this.dataList.unshift(data[0]);
               		}, () => {
               			//联网失败的回调,隐藏下拉刷新的状态
               			mescroll.endErr();
               		})
               	},
               	/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
               	upCallback(mescroll) {
               		//联网加载数据
               		this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
						mescroll.endSuccess(curPageData.length);
               			//设置列表数据
               			this.dataList=this.dataList.concat(curPageData);
               		}, () => {
               			//联网失败的回调,隐藏下拉刷新的状态
               			mescroll.endErr();
               		})
               	},
               	async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
					console.log(pageNum);
					 try {
						if (pageNum == 0) {
							//此处模拟下拉刷新返回的数据
							var that=this;
							let opts={
									url: 'https://vr.ujquan.com/mobile?act=vrlist',
									method: 'GET'
								};
							let param={
									page:1,
									size:10,	  
								};
							await httpTokenRequest(opts, param).then(res => { //接口请求成功处理
								  let shopMallDatas=res.data.list;
								  if(pageNum == 1) 
								  that.dataList = []; //如果是第一页需手动置空列表
								  console.log(res.data.list);
								  that.dataList = that.dataList.concat(res.data.list);
								  
							})	
						} else {
							//此处模拟上拉加载返回的数据
							var that=this;
							let opts={
									url: 'https://vr.ujquan.com/mobile?act=vrlist',
									method: 'GET'
								};
							let param={
									page:pageNum,
									size:10,	  
								};
							await http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理
									 let shopMallDatas=res.data.list;
									 //curPageData = res.data.list;
									  console.log(res.data.list);
									 if(pageNum == 1) 
									 that.dataList = []; //如果是第一页需手动置空列表
									 that.dataList = that.dataList.concat(res.data.list);
									 that.curPageLength = res.data.list.length;
									
						},error => {//接口请求失败
									   mescroll.endErr()
								})
							
						}
						    
							//联网成功的回调
							successCallback && successCallback(that.dataList);
						} catch (e) {
							//联网失败的回调
							errorCallback && errorCallback();
						}
						
               	}
				
				
				
          },
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
		font-family: PingFangSC-Regular, PingFangSC;
	}
	
	.content {
		var: (--status-bar-height);
		width: 100%;
		height: 100%;
		padding-bottom: 10px;
	}

	.vr_area {
		width: 94.6%;
		height: 100%;
		margin: 0 auto;
	}

	.vr-box {
		height: 150px;
		width: 94%;
		border-radius: 10px;
		margin-bottom:10px;
		margin-left:3%;
		position: relative;
	}

	.vr_name {
		position: absolute;
		font-size: 18px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 16px;
		margin-top: 20px;
		margin-left: 10px;
		z-index: 10;
	}

	.vr-box image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.vr_look {
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 3;
		width: 78.5px;
		height: 26px;
		border-radius: 14px;
		text-align: center;
		background: rgba(254, 67, 56, 1);
		font-size: 14px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 26px;
	}
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		font-size: 32upx;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
</style>
